<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    modal-append-to-body
    append-to-body
    lock-scroll
    class="small-common-dialog-size"
  >
    <div class="approve-content">
      <DialogTitle title="选择审批人" style="margin-bottom: 16px" />
      <el-form ref="approverFormRef" :model="approverForm" :rules="formRules">
        <el-form-item label="审批人" prop="approver" label-width="80px">
          <selectWithUserLoad
            ref="selectWithUserLoadRef"
            v-model="approverForm.approver"
            :hide-select-list="hideSelectList || []"
            :extend-params="{
              type: 1,
              authUrl: 'medium:supplier:modifyAuditApply'
            }"
            value-type="object"
            is-dynamic-load
            style="width: 240px;"
            key-name="id"
            label-name="userName"
            filterable
            collapse-tags
            clearable
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer">
      <el-button :disabled="submitBtnDisabled" class="confirm-btn" type="primary" @click="formValidate">确定</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { userPermission } from '@/api/user';
import { mapState } from 'vuex';
export default {
  name: 'SelectApprover',
  components: {
    DialogTitle,
    selectWithUserLoad
  },
  props: {
    isAgree: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      approverForm: {
        approver: {}
      },
      hideSelectList: []
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    formRules() {
      return {
        approver: [{ required: true, trigger: 'change', message: '请选择审批人' }]
      };
    },
    submitBtnDisabled() {
      return !this.approverForm.approver || !this.approverForm.approver.id;
    }
  },
  methods: {
    init() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        const localApprover = localStorage.getItem('SUPPLIER_APPROVER');
        if (localApprover) {
          this.queryUserPermission(JSON.parse(localApprover));
        }
        this.$refs['selectWithUserLoadRef'].getListData();
      });
    },
    queryUserPermission(data) {
      const params = Object.create(null);
      params.id = this.userInfo.id;
      params.permission = 'medium:supplier:modifyAuditApply';
      params.type = 0;
      userPermission(params).then(res => {
        if (res.data && res.data.hasAuth) {
          this.approverForm.approver = data;
          this.hideSelectList = [data];
        } else {
          localStorage.removeItem('SUPPLIER_APPROVER');
          this.hideSelectList = [];
        }
      }).catch(_ => {
        localStorage.removeItem('SUPPLIER_APPROVER');
        this.hideSelectList = [];
      });
    },
    handleDialogClose() {
      this.dialogVisible = false;
      this.$refs['approverFormRef'].resetFields();
    },
    formValidate() {
      this.$refs['approverFormRef'].validate(valid => {
        if (valid) {
          this.$emit('approverSelected', this.approverForm.approver.id);
          localStorage.setItem('SUPPLIER_APPROVER', JSON.stringify(this.approverForm.approver));
          this.handleDialogClose();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 240px;
  .el-input__inner {
    width: 240px;
  }
}
.approve-content {
  margin-bottom: 24px;
  .loading-container {
    width: 100%;
    text-align: center;
    i {
      color: #999;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .confirm-btn {
    font-size: 16px;
    padding: 8px 26px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 26px;
    margin-left: 16px !important;
  }
}
</style>
